//
//  IndexContentView.swift
//  browser
//
//  Created by Kotori on 2021/6/10.
//

import SwiftUI

struct IndexContentView: View {
    var indexCallback: IndexCallback?
    var btnDelegate: IndexBtnDelegate?
    @State var frequentSite: [History] = HistoryManager.getRecentHistoryList(limit: 8)
    
    let frequentGridColumn = [GridItem(.flexible()),GridItem(.flexible()),GridItem(.flexible()),GridItem(.flexible())]
    
    
    var body: some View {
        VStack {
            Image("catIcon")
                .scaleEffect(0.2)
                .frame(width: /*@START_MENU_TOKEN@*/100/*@END_MENU_TOKEN@*/, height: /*@START_MENU_TOKEN@*/100/*@END_MENU_TOKEN@*/, alignment: /*@START_MENU_TOKEN@*/.center/*@END_MENU_TOKEN@*/)
                .offset(x: /*@START_MENU_TOKEN@*/10.0/*@END_MENU_TOKEN@*/, y: 0)
            Text("YoruNeko")
                .font(.subheadline)
                .bold()
                .offset(x: 2.0, y: 0)
            
            Button {
                btnDelegate?.goToSearchView()
            } label: {
                Text("搜索或键入网址")
                    .frame(width: 300, height: 40, alignment: /*@START_MENU_TOKEN@*/.center/*@END_MENU_TOKEN@*/)
            }
            .foregroundColor(.gray)
            .background(RoundedRectangle(cornerRadius: 20).foregroundColor(Color(.systemGray5)))
            .padding(.vertical)
            
            LazyVGrid(columns: frequentGridColumn, alignment: .center) {
                ForEach(frequentSite) { history in
                    IndexFrequentItem(frequentSite: history, onClick: {(btnDelegate?.loadURL(urlStr: history.url))!})
                }
            }
            .onAppear {
                frequentSite = HistoryManager.getRecentHistoryList(limit: 8)
            }
            .frame(width: 270)
            
            
        }
    }
}

struct IndexFrequentItem: View {
    var frequentSite: History
    var onClick: () -> Void
    var body: some View {
        
        Button {
            onClick()
        } label: {
            VStack {
                ZStack {
                    Circle().foregroundColor(Color(.systemGray5))
                    if let data = frequentSite.faviconData , let uiImage = UIImage(data: data){
                        Image(uiImage: uiImage)
                            .resizable()
                            .frame(width: 25, height: 25, alignment: .center)
                    }else{
                        Image(systemName: "star")
                            .resizable()
                            .frame(width: 25, height: 25, alignment: .center)
                    }
                }
                .frame(width: 50, height: 50, alignment: .center)
                Text(frequentSite.title)
                    .lineLimit(/*@START_MENU_TOKEN@*/2/*@END_MENU_TOKEN@*/)
                    .frame(height: 50)
                    .font(.footnote)
            }
            .foregroundColor(.black)
        }
    }
}


struct IndexContentView_Previews: PreviewProvider {
    static var previews: some View {
        IndexContentView()
    }
}
